# Component: Article Item

Multi-purpose card for Blogs, Pages, and Shop Products


| List        | ![[Pasted image 20260426075931.png]] |
| ----------- | ------------------------------------ |
| Card        | ![[Pasted image 20260426080023.png]] |
| Anniversary | ![[Pasted image 20260426080112.png]] |
| Card Fancy  | ![[Pasted image 20260426080141.png]] |
| Hero        | ![[Pasted image 20260426080224.png]] |


### BEM Anatomy

| Type      | Class Name              | Description                                                                      |
| --------- | ----------------------- | -------------------------------------------------------------------------------- |
| ==Block== | `.as-article-item`      | Base wrapper. Ensures `height: 100%` for grid alignment.                         |
| Modifier  | `--list`                | The standard visual mode. Article will be shown as a list-item                   |
| Modifier  | `--card`                | Sets image height to 300px with `object-fit: cover`.                             |
| Modifier  | `--hero`                | High-impact style with gradient text overlays.                                   |
| Modifier  | `--fancy`               | Enables hover animations (zoom/contrast) and centered italic titles.             |
| Element   | `__link`                | Wraps the entire card; resets text decoration for the nested content.            |
| Element   | `__card`                | Internal structural wrapper used when the item is rendered in card mode.         |
| Element   | `__row`                 | Flexbox or grid row used for horizontal alignment of internal elements.          |
| Element   | `__header`              | Contains the image and the absolute-positioned category badge.                   |
| Element   | `__caption`             | Supporting text or subtitle located near the main title.                         |
| Element   | `__title`               | The main heading for the article item; usually handles font-size and truncation. |
| Element   | `__excerpt`             | Short descriptive text or summary; provides spacing above/below.                 |
| Element   | `__image-container`     | Aspect-ratio controlled container to prevent layout shift during image load.     |
| Element   | `__image`               | The actual `<img>` or `picture` element; handles responsive scaling.             |
| Element   | `__content`             | Primary wrapper for text-based information (Title, Excerpt, Body).               |
| Element   | `__body`                | Flex container for content. Modifiers: `--shop` or `--page`.                     |
| Modifier  | `__body--page`          | Layout specific to informational pages; increases padding and line-height.       |
| Modifier  | `__body--shop`          | Layout specific to e-commerce; optimizes for price and CTA visibility.           |
| Element   | `__meta`                | Container for secondary information like categories, tags, or prices.            |
| Modifier  | `__meta--price`         | Styles the meta element specifically for currency display (bold/accent color).   |
| Modifier  | `__meta--stock`         | Styles the meta element for inventory status (green/red indicators).             |
| Element   | `__date`                | Explicit container for the publication timestamp.                                |
| Element   | `__footer`              | Flex row for metadata (Date, Watch count, Author).                               |
| Element   | `__footer-item`         | Individual unit within the footer; handles spacing between adjacent items.       |
| Modifier  | `__footer-item--date`   | Prepend icon or formatting specific to time/calendar icons.                      |
| Modifier  | `__footer-item--watch`  | Prepend icon or formatting specific to view counts.                              |
| Modifier  | `__footer-item--author` | Prepend icon or formatting for the contributor's name/avatar.                    |
| Element   | `__button`              | Internal call-to-action button (e.g., "Read More" or "Add to Cart").             |
| Modifier  | `__button--load-more`   | Styles the button for pagination or infinite scroll triggers.                    |
| Element   | `__not-found`           | Fallback container displayed when no article content is available.               |

### Implementation Reference

##### Generated HTML

```html
<div class="as-article-item as-article-item--card">
    <a href="..." class="as-article-item__link">
        <div class="as-article-item__card card">
            <div class="as-article-item__header">
                <img src="..." class="as-article-item__image">
                <span class="as-badge badge">Category</span>
            </div>
            
            <div class="as-article-item__body card-body">
                <h4 class="as-article-item__title">Article Title</h4>
                <p class="as-article-item__excerpt">Excerpt text...</p>
            </div>

            <div class="as-article-item__footer card-footer">
                <div class="as-article-item__footer-item--date">...</div>
            </div>
        </div>
    </a>
</div>
```

##### SCSS

```scss
.as-article-item {
  // Common Element Logic
  &__footer {
    display: flex;
    justify-content: space-between;
  }

  // Visual Modifiers
  &--fancy {
    .as-article-item__link:hover {
      .as-article-item__image {
        transform: scale(1.1);
      }
    }
  }
}
```

